<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>工厂成就</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
    <!-- https://fonts.google.com/specimen/Roboto -->
    <link rel="stylesheet" href="static/css/fontawesome.min.css">
    <!-- https://fontawesome.com/ -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <!-- https://getbootstrap.com/ -->
    <link rel="stylesheet" href="static/css/templatemo-style.css">
    <!--
	Product Admin CSS Template
	https://templatemo.com/tm-524-product-admin
	-->
</head>

<body id="reportsPage" onload="insert_order_html({{order_num}}, '{{order_list}}');">

<script language="javascript">

function insert_order_html(Str1, list){
    str = ""
    temp = list.split("!")

    for (i=0;i<Number(Str1);++i){
        k = i.toString()
        tem = temp[i].split(",")

        str = str + "<tr>"
        str = str +  "<td>"+ tem[0] + "</td>&nbsp;"
        str = str +  "<td>"+ tem[1] + "</td>&nbsp;"
        str = str +  "<td>"+ tem[2]  + "</td>&nbsp;"
        str = str +  "<td>"+ tem[3] + "</td>&nbsp;"
        str = str +  "<td>"+ tem[4] + "</td>&nbsp;"
        str = str +  "<td>"+ tem[5] + "</td>&nbsp;"
        str = str +  "<td>"+ tem[6] + "</td>&nbsp;"
        str = str +  "<td>"+ tem[7] + "</td>&nbsp;"
        str = str + "</tr>"
     }
 aa.innerHTML=str;
}

</script>

    <div class="" id="home">
        <nav class="navbar navbar-expand-xl">
            <div class="container h-100">
                <a class="navbar-brand" href="index.html">
                    <h1 class="tm-site-title mb-0">欢迎来到  Unico Factory</h1>
                </a>
                <button class="navbar-toggler ml-auto mr-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars tm-nav-icon"></i>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mx-auto h-100">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <i class="fas fa-tachometer-alt"></i>
                                工厂成就
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                       <li class="nav-item">
                            <a class="nav-link" href="adjust.html">
                                 <i class="far fa-file-alt"></i> 工厂信息
                                    <span class="sr-only">(current)</span>
                            </a>
                         </li>
                        <li class="nav-item">
                            <a class="nav-link" href="products.html">
                                <i class="fas fa-shopping-cart"></i>
                                生产订单
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="accounts.html">
                                <i class="far fa-user"></i>
                                工厂管理
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-cog"></i>
                                <span>
                                    Settings <i class="fas fa-angle-down"></i>
                                </span>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">null</a>
                                <a class="dropdown-item" href="#">null</a>
                                <a class="dropdown-item" href="#">null</a>
                            </div>
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link d-block" href="login.html">
                                Admin, <b>Logout</b>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </nav>
        <div class="container">
            <div class="row">
                <div class="col">
                    <p class="text-white mt-5 mb-5">欢迎 <b></b></p>
                </div>
            </div>
            <!-- row -->
            <div class="row tm-content-row">
                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-block-col">
                    <div class="tm-bg-primary-dark tm-block">
                        <h2 class="tm-block-title">最新生产</h2>
                        <canvas id="lineChart"></canvas>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-block-col">
                    <div class="tm-bg-primary-dark tm-block">
                        <h2 class="tm-block-title">商品类型</h2>
                        <canvas id="barChart"></canvas>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-12 tm-block-col">
                    <div class="tm-bg-primary-dark tm-block tm-block-taller">
                        <h2 class="tm-block-title">坏物占比 </h2>
                        <div id="pieChartContainer">
                            <canvas id="pieChart" class="chartjs-render-monitor" width="200" height="200"></canvas>
                        </div>                        
                    </div>
                </div>

                <div class="col-12 tm-block-col">
                    <div class="">
                        <h2 class="tm-block-title">生产订单</h2>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">商店编号</th>
                                    <th scope="col">产品编号</th>
                                    <th scope="col">产品名称</th>
                                    <th scope="col">工厂名称</th>
                                    <th scope="col">订单总数</th>
                                    <th scope="col">订单日期</th>
                                    <th scope="col">坏物数</th>
                                    <th scope="col">订单批次</th>
                                </tr>
                            </thead>
                            <tbody id="aa"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <footer class="tm-footer row tm-mt-small">
            <div class="col-12 font-weight-light">
                <p class="text-center text-white mb-0 px-4 small">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">Unico</a></p>
            </div>
        </footer>
    </div>

    <script src="static/js/jquery-3.3.1.min.js"></script>
    <!-- https://jquery.com/download/ -->
    <script src="static/js/moment.min.js"></script>
    <!-- https://momentjs.com/ -->
    <script src="static/js/Chart.min.js"></script>
    <!-- http://www.chartjs.org/docs/latest/ -->
    <script src="static/js/bootstrap.min.js"></script>
    <!-- https://getbootstrap.com/ -->
    <script src="static/js/tooplate-scripts.js"></script>
    <script>
        Chart.defaults.global.defaultFontColor = 'white';
        let ctxLine,
            ctxBar,
            ctxPie,
            optionsLine,
            optionsBar,
            optionsPie,
            configLine,
            configBar,
            configPie,
            lineChart;
        barChart, pieChart;
        // DOM is ready
        $(function () {
            drawLineChart(); // Line Chart
            drawBarChart(); // Bar Chart
            drawPieChart(); // Pie Chart

<!--            饼状图-->
            var chartHeight = 300;

    $("#pieChartContainer").css("height", chartHeight + "px");

    ctxPie = document.getElementById("pieChart").getContext("2d");

    optionsPie = {
      responsive: true,
      maintainAspectRatio: false,
      layout: {
        padding: {
          left: 10,
          right: 10,
          top: 10,
          bottom: 10
        }
      },
      legend: {
        position: "top"
      }
    };

    configPie = {
      type: "pie",
      data: {
        datasets: [
          {
            data: [{{bad_num}}, {{total_num}}],
            backgroundColor: ["#F7604D", "#4ED6B8"],
            label: "Storage"
          }
        ],
        labels: [
          "坏物品数目 ",
          "正常物品数目 "
        ]
      },
      options: optionsPie
    };

    pieChart = new Chart(ctxPie, configPie);





<!--bar图表-->
    ctxBar = document.getElementById("barChart").getContext("2d");

    optionsBar = {
      responsive: true,
      scales: {
        yAxes: [
          {
            barPercentage: 0.2,
            ticks: {
              beginAtZero: true
            },
            scaleLabel: {
              display: true,
              labelString: "产品类型"
            }
          }
        ]
      }
    };

    optionsBar.maintainAspectRatio =
      $(window).width() < width_threshold ? false : true;

    /**
     * COLOR CODES
     * Red: #F7604D
     * Aqua: #4ED6B8
     * Green: #A8D582
     * Yellow: #D7D768
     * Purple: #9D66CC
     * Orange: #DB9C3F
     * Blue: #3889FC
     */

    configBar = {
      type: "horizontalBar",
      data: {
        labels: ["短袖", "长袖", "长裤", "鞋子", "短裤"],
        datasets: [
          {
            label: "生产数量",
            data: [{{item_num1}}, {{item_num2}}, {{item_num3}}, {{item_num4}}, {{item_num5}}],
            backgroundColor: [
              "#F7604D",
              "#4ED6B8",
              "#A8D582",
              "#D7D768",
              "#9D66CC",
              "#DB9C3F",
              "#3889FC"
            ],
            borderWidth: 0
          }
        ]
      },
      options: optionsBar
    };

    barChart = new Chart(ctxBar, configBar);



<!--    line图表-->
    ctxLine = document.getElementById("lineChart").getContext("2d");
    optionsLine = {
      scales: {
        yAxes: [
          {
            scaleLabel: {
              display: true,
              labelString: "数量"
            }
          }
        ]
      }
    };

    // Set aspect ratio based on window width
    optionsLine.maintainAspectRatio =
      $(window).width() < width_threshold ? false : true;

    configLine = {
      type: "line",
      data: {
        labels: [
          "{{DATE1}}",
          "{{DATE2}}",
          "{{DATE3}}",
          "{{DATE4}}",
          "{{DATE5}}",
          "{{DATE6}}",
          "{{DATE7}}"
        ],
        datasets: [
          {
            label: "最近订单数量",
            data: [{{sale_1}}, {{sale_2}}, {{sale_3}}, {{sale_4}}, {{sale_5}}, {{sale_6}}, {{sale_7}}],
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            cubicInterpolationMode: "monotone",
            pointRadius: 0
            }
        ]
      },
      options: optionsLine
    };






    lineChart = new Chart(ctxLine, configLine);
            $(window).resize(function () {
                updateLineChart();
                updateBarChart();                
            });
        })
    </script>
</body>

</html>